<!DOCTYPE html>
<html>

<head>
    <!-- 页面meta -->
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>国际金融中心</title>
    <!-- Tell the browser to be responsive to screen width -->
    <meta content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no" name="viewport">
    <!-- 页面meta /-->

    <script src="/pages/base.js"></script>

    <!--    ztree 的css -->
    <link rel="stylesheet" href="/css/zTreeStyle.css" type="text/css">

    <!--    ztree 对应的js -->
    <script type="text/javascript" src="/js/jquery.ztree.core.min.js"></script>
    <script type="text/javascript" src="/js/jquery.ztree.excheck.js"></script>

</head>
<body>
<div id="frameContent" class="content-wrapper" style="margin-left:0px;">
    <!-- 内容头部 -->
    <section class="content-header">
        <h1>
            role管理
        </h1>
        <ol class="breadcrumb">
            <li><a href="all-admin-index.html"><i class="fa fa-dashboard"></i> 首页</a></li>
            <li><a href="all-order-manage-list.html">role管理</a></li>
        </ol>
    </section>
    <!-- 内容头部 /-->

    <!-- 正文区域 -->
    <section class="content" id="app">

        <!--用户信息-->
        <div class="panel panel-default">
            role的权限修改
        </div>
        <!--显示用户对应的权限
            01  第一步显示所有的权限
            02  把每个角色对应的权限 进行展示
        -->
        <ul id="treeDemo" class="ztree"></ul>

        <!--工具栏-->
        <div class="box-tools text-center">
            <button type="button" class="btn bg-maroon" @click="saveRolePermission">保存</button>
            <button type="button" class="btn bg-default" onclick="history.back(-1);">返回</button>
        </div>
        <!--工具栏/-->

    </section>
    <!-- 正文区域 /-->

</div>

<!-- 内容区域 /-->
<script>

    //1. ztree的设置
    var setting = {
        check: {
            enable: true,
            chkboxType:{
                Y:"s",
                N:"ps"
            },
        },

        data: {
            simpleData: {
                enable: true
            }
        }
    };

    // var treeObj = $.fn.zTree.getZTreeObj("tree");
    // var nodes = treeObj.getCheckedNodes(true);

    new Vue({
        el:"#app",
        data:{
            zTree:{},
            rid:0
        },
        methods:{
            // 获取勾选的权限 操作
            saveRolePermission(){
                // this.zTree 拿到tree
                // getCheckedNodes(true); 获取所有的勾选的节点集合
                let arr = this.zTree.getCheckedNodes(true);
                console.log(arr);
                // 拿到节点的id
                // 1. 把多个id 拼接成字符串传送到id
                // 2. 把多个id 放到数组中,把数组提交到服务器
                let ids = [];
                for(let i = 0 ; i < arr.length ; i++){
                    // 遍历选中的 节点的id
                    ids.push(arr[i].id);
                }
                console.log(ids);

                //发送数据
                axios({
                    method:"PUT",
                    url:"http://localhost:8080/permission",
                    data:{
                        rid:this.rid,
                        ids:ids
                    }
                }).then(resp=>{
                    alert(resp.data.msg);
                    location.href = "/pages/role/role-list.html";
                })
            },
            //查询权限
            findPermission(rid){
                axios({
                    method:"GET",
                    url:"http://localhost:8080/permission/"+rid
                }).then(resp=>{
                    console.log(resp)
                    let zNodes = resp.data;
                    this.zTree = $.fn.zTree.init($("#treeDemo"), setting, zNodes);
                })
            }
        },
        created(){
            let rid = localStorage.getItem("rid");
            this.rid =rid;
            this.findPermission(rid);
        }
    });
</script>
</body>

</html>